import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Modal, Text } from "react-native";
import { Divider, Button } from "@rneui/themed";
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const ModalMenu = () => {

    const { modalVisible, setModalVisible, handlePressPaste, handlePressScan } = useContext(CommonContext)

    const handlePressCancel = () => {
        setModalVisible(false)
    }

    return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}
        >
            <View style={styles.centeredView}>
                <View style={styles.topMenu}>
                    <View style={{ height: 50 * ratio, justifyContent: 'center', alignItems: 'center' }}>
                        <Button type="clear" onPress={handlePressPaste}>
                            <Text style={styles.buttonTitle}>Paste from Clipboard</Text>
                        </Button>
                    </View>
                    <Divider color="#EAEAEA" />
                    <View style={{ height: 49 * ratio, justifyContent: 'center', alignItems: 'center' }}>
                        <Button type="clear" onPress={handlePressScan}>
                            <Text style={styles.buttonTitle}>Scan QR Code</Text>
                        </Button>
                    </View>
                </View>
                <View style={styles.bottomMenu}>
                    <Button type="clear" onPress={handlePressCancel}>
                        <Text style={styles.buttonTitle}>Cancel</Text>
                    </Button>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    topMenu: {
        width: 345 * ratio,
        height: 100 * ratio,
        backgroundColor: '#FAFAFA',
        borderRadius: 5,
        marginBottom: 12 * ratio
    },
    bottomMenu: {
        width: 345 * ratio,
        height: 50 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 5,
        marginBottom: 18 * ratio,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonTitle: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        lineHeight: 24,
        color: '#0069F6'
    }
})
export default ModalMenu